<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="box-card">
      <div class="top">
        <div>
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div>
          <el-button>重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <span>账号/姓名: </span>
        <input type="text" placeholder="请输入账号、姓名">
      </div>
    </el-card>
    <!-- 添加 -->
    <el-card class="add-card">
      <div>
        <el-icon>
          <Fold />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button type="primary" @click="showDialog = true">添加</el-button>
      </div>
    </el-card>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="list" :cell-style="{ 'text-align': 'center' }" border>
        <el-table-column v-for="(value, key) in title" :key="value" :prop="key.toString()" :label="value"
          align="center">
          <template #default="scope" v-if="key.toString() === 'status'">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
              @change="switchfn(scope.row.id)" />
          </template>
          <template #default="scope" v-if="key.toString() === 'admin_edit'">
            <div class="edit">
              <el-button size="small" text type='primary'>分配角色</el-button>
              <el-button size="small" text type='primary'>编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination v-model:currentPage="data.pageNum" v-model:page-size="data.pageSize"
        :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
        background @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <UserDailog :show="showDialog" />
  </div>
</template>
  
<script setup lang='ts'>
import { computed, ref, toRefs } from 'vue';
import UserDailog from './UserDailog.vue';
import type { ITitle } from '#/global'
import EventBus from '@/utils'
// 接收home传过来的数据
interface IProps {
  title: ITitle,
  data: AdminListRespone
}
const props = defineProps<IProps>()
let list = computed(() => props.data.list)
let title = computed(() => props.title)


// 定义弹出框
let showDialog = ref(false)
EventBus.on('changshow', () => {
  showDialog.value = false
})

function switchfn(params: number) {
  console.log(params);
}

// 切换分页
const emit = defineEmits(['paginate'])
function handleSizeChange(val: number) {
  emit("paginate", val);
}
function handleCurrentChange(val: number) {
  emit("paginate", val);
}

</script>
  
<style>
.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
  color: gray;
}

.box-card .bottom input {
  border: 1px solid rgb(218, 216, 216);
  height: 26px;
  border-radius: 5px;
  margin-left: 8px;
  padding-left: 5px;
  color: rgb(201, 191, 191);
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
}


.el-card.add-card {
  --el-card-padding: 0;
  height: 55px;
  margin: 10px 0;
  /* width: 98%; */
  padding: 0 20px;
  box-sizing: border-box;
}

.el-card.add-card .el-card__body {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card.add-card .el-card__body div:first-child span {
  margin-left: 10px;
}

.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  float: right;
}
</style>